<template>
<div class="login-container">
  <div>
    <div class="login-title">天恒微服务工作流管理平台</div>
    <div class="login-form">
      <p>登录</p>
      <div class="_account">
        <input type="text" placeholder="请输入账号" v-model="account" @blur="account?isAccountValid=true:isAccountValid=false">
        <span v-show="!isAccountValid">{{validMsg?validMsg:'请输入账号'}}</span>
      </div>
      <div class="_password">
        <input type="password" placeholder="请输入密码" v-model="password" @blur="password?isPasswordValid=true:isPasswordValid=false" @keyup.enter="handleLogin">
        <span v-show="!isPasswordValid">{{validMsg?validMsg:'请输入密码'}}</span>
      </div>
      <div class="_forget"><input type="checkbox"/>记住密码</div>
      <button @click="handleLogin">登录</button>
      <div class="_footer">武汉天恒信息科技有限公司</div>
    </div>
  </div>
</div>
</template>

<script>
import request from '@/utils/request'
import {setCookie} from '@/utils/index'

export default {
    name: "login",
    data(){
      return{
        account:null,
        password:null,
        isAccountValid:true,
        isPasswordValid:true,
        validMsg:null
      }
    },
    methods:{
      handleLogin(){
        if (this.account && this.password) {
          let params={
            username:this.account,
            password:this.password
          };
          new Promise((resolve, reject) => {
            request('login',params)
              .then(response => {
                if (response.code && response.code == 200) {
                  setCookie('token',response.data);
                  this.$router.push('/home');
                }else{
                  if (response.code == 417) {
                    this.isAccountValid=false;
                  }else if(response.code == 419){
                    this.isPasswordValid=false;
                  }
                  this.validMsg=response.message;
                }
                resolve();
              })
              .catch(error => {
                reject(error);
              });
          });
        }
      }
    }
  }
</script>

<style scoped>
.login-container{
  width: 100%;
  height: 100%;
  background: url(../assets/login-bg.png) no-repeat center center fixed;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-container>div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/*login head logo*/
.login-title{
  font-size: 36px;
  color: #000;
  letter-spacing: 2px;
  margin-bottom: 32px;
}
/*login main*/
.login-form{
  width: 500px;
  background-color: #fff;
  border-radius: 4px;
  padding: 0 64px;
}
.login-form>p{
  text-align: center;
  font-size: 20px;
  color: #000;
  padding: 32px 0;
}
.login-form ._account,.login-form ._password{
  border-bottom: 1px solid #dae3ec;
  margin-bottom: 16px;
  position: relative;
}
.login-form ._account{
  background: url("../assets/account.png") no-repeat right center;
  background-size: auto 20px;
  padding-right:24px;
  margin-bottom: 32px;
}
.login-form ._password{
  background: url("../assets/password.png") no-repeat right center;
  background-size:  20px auto;
  padding-right:24px;
}
.login-form ._account input,.login-form ._password input{
  padding: 8px 0;
  width: 100%;
  font-size: 16px;
}
.login-form ._account span,.login-form ._password span{
  position:absolute;
  left: 0;
  top: 38px;
  font-size: 16px;
  color: #d82323;
}
.login-form ._forget{
  color: #8098ae;
  font-size: 14px;
  text-align: right;
  line-height: 20px;
}
.login-form ._forget input[type=checkbox]{
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}
.login-form button{
  width: 100%;
  color: #fff;
  font-size: 18px;
  border-radius: 4px;
  background: linear-gradient(left,#4972cc 0%,#6d92eb 100%);
  padding: 8px 0;
  margin: 32px 0;
}
.login-form ._footer{
  color: #2b54b0;
  font-size: 14px;
  background-color: #ebf5ff;
  text-align: center;
  padding: 16px 0;
  margin: 0 -64px;
}
</style>
